<!--
 * @author guojiteng
 投票活动-预览
-->
<template>
  <div class="tphd-preview">
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :visible.sync="state"
      title="预览"
      center
      :before-close="handleCancel"
    >
      <div v-loading="previewLoading" class="preview-container">
        <iframe :src="src" />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="handleCancel()">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { getVotingInfo, pgetList, getOptionDetail } from '../api/index'

export default {
  name: 'IframePreview',
  directives: {
    elDragDialog
  },
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      state: true,
      previewLoading: false,
      view: '/API-DOCUMENT/document/file/download?id=',
      info: {},
      endTime: '2021-03-20 00:00:00',
      time: '',
      flag: false,
      activeName: 'xh',
      list: [],
      timer: null,
      nowCount: 0,
      showPage: 1, // 1是首页 2 是选项详情
      detail: {}// 选项详情
    }
  },
  watch: {
    activeName(val) {
      this.getList()
    }
  },
  mounted() {

  },
  created() {
    // this.getData()
  },
  destroyed() {
    if (this.timer != null) {
      clearInterval(this.timer)
    }
  },
  methods: {
    changeType(t) {
      this.activeName = t
    },
    start() {
      this.timer = setInterval(() => {
        if (this.flag === true) {
          clearInterval(this.timer)
        }
        this.timeDown()
      }, 1000)
    },
    timeDown() {
      const endTime = new Date(this.info.endTime)
      const leftTime = parseInt((endTime.getTime() - this.nowCount) / 1000)
      this.nowCount += 1000
      const d = parseInt(leftTime / (24 * 60 * 60))
      const h = this.formate(parseInt(leftTime / (60 * 60) % 24))
      const m = this.formate(parseInt(leftTime / 60 % 60))
      const s = this.formate(parseInt(leftTime % 60))
      if (leftTime <= 0) {
        this.flag = true
      }
      this.time = `${d}天${h}小时${m}分${s}秒`
    },
    formate(time) {
      if (time >= 10) {
        return time
      } else {
        return `0${time}`
      }
    },
    /**
     * 根编辑回显
     */
    getData() {
      this.previewLoading = true
      return new Promise((resolve, reject) => {
        getVotingInfo({ id: this.id }).then(res => {
          this.previewLoading = false
          this.info = res.data.data
          if (res.data.code === '200' && res.data.data) {
            this.nowCount = new Date(this.info.nowTime).getTime()
            this.start()
          }
          this.getList()
        }).catch(error => {
          this.previewLoading = false
          reject(error)
        })
      })
    },
    /**
     * 获取选项详情
     */
    toDetail(item) {
      this.previewLoading = true
      return new Promise((resolve, reject) => {
        getOptionDetail({ id: item.id }).then(res => {
          this.previewLoading = false
          if (res.data.code === '200' && res.data.data) {
            this.detail = res.data.data
            this.ps = item.selectedNumber || 0
            this.showPage = 2
          }
        }).catch(error => {
          this.previewLoading = false
          reject(error)
        })
      })
    },
    getList() {
      this.previewLoading = true
      return new Promise((resolve, reject) => {
        pgetList({ dataId: this.id, type: this.activeName }).then(res => {
          this.previewLoading = false
          this.list = res.data.data || []
          // console.log('list', this.list)
        }).catch(error => {
          this.previewLoading = false
          reject(error)
        })
      })
    },
    handleCancel() {
      this.$emit('closeSet')
    }
  }
}
</script>

<style lang="scss">

.tphd-preview {
  position: relative;

  .preview-container {
    height: 80vh;
    width: 375px;
    margin: 0 auto;
    position: relative;

    &::-webkit-scrollbar {
      display: none;
    }

    iframe {
      width: 100%;
      height: 100%;
    }

  }
}
</style>
